<%--
  Created by IntelliJ IDEA.
  User: D调的华丽
  Date: 2017/11/21
  Time: 10:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@include file="/WEB-INF/jsp/taglib.jsp" %>
<html>
<head>
    <c:import url="/WEB-INF/jsp/frontend/head.jsp" />
    <c:import url="/WEB-INF/jsp/frontend/script.jsp"/>
    <link rel="stylesheet" href="<spring:url value="/css/message.css" />"/>
    <title>消息</title>
</head>
<body>
<div class="head">
    <c:import url="/WEB-INF/jsp/frontend/header.jsp"/>
</div>
<div class="row message-container">
    <div class="col-md-7 message-content">
        <div class="message-choosebox">
            <input name="message-choose" type="radio" id="message-reply" class="message-choose" checked="checked">
            <label for="message-reply" class="message-choose-item" id="message-choose-reply">
                <img src="../../../../images/talk/reply.png"><span>回复</span>
            </label>
            <input name="message-choose" type="radio" id="message-follow" class="message-choose">
            <label for="message-follow" class="message-choose-item" id="message-choose-follow">
                <img src="../../../../images/talk/follow.png"><span>关注</span>
            </label>
            <input name="message-choose" type="radio" id="message-like" class="message-choose">
            <label for="message-like" class="message-choose-item" id="message-choose-like">
                <img src="../../../../images/talk/like.png"><span>赞</span>
            </label>
        </div>
        <div class="reply-content">
            <div class="reply-head">收到的回复</div>
            <div class="headBar"></div>
            <div class="reply-detail">
                <div class="message-item">
                    <img src="../../../../images/talk/person.png" class="message-item-img img-circle">
                    <div class="message-item-time">2017-08-20 21:00</div>
                    <div class="message-item-content">
                        <div class="message-item-title">
                            <a href="#" class="message-color">测试用户</a>
                            评论了
                            <a href="#" class="message-color">在清华大学当学渣是种怎样的体验体验体验体验体验体验体验？</a>
                        </div>
                        <div class="message-item-text">可能成为大科学家，可能拿个奖学金，可能谈一场恋爱爱爱爱爱爱爱爱爱爱</div>
                    </div>
                </div>
                <div class="message-item">
                    <img src="../../../../images/talk/person.png" class="message-item-img img-circle">
                    <div class="message-item-time">2017-08-20 21:00</div>
                    <div class="message-item-content">
                        <div class="message-item-title">
                            <a href="#" class="message-color">测试用户</a>
                            评论了
                            <a href="#" class="message-color">在清华大学当学渣是种怎样的体验体验体验体验体验体验体验？</a>
                        </div>
                        <div class="message-item-text">可能成为大科学家，可能拿个奖学金，可能谈一场恋爱爱爱爱爱爱爱爱爱爱</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="follow-content" style="display: none;">
            <div class="follow-head">关注人动态</div>
            <div class="headBar"></div>
            <div class="follow-detail">
                <div class="message-item">
                    <img src="../../../../images/talk/person.png" class="message-item-img img-circle">
                    <div class="message-item-time">2017-08-20 21:00</div>
                    <div class="message-item-content">
                        <div class="message-item-title">
                            <a href="#" class="message-color">测试用户</a>
                            评论了
                            <a href="#" class="message-color">在清华大学当学渣是种怎样的体验体验体验体验体验体验体验？</a>
                        </div>
                        <div class="message-item-text">可能成为大科学家，可能拿个奖学金，可能谈一场恋爱爱爱爱爱爱爱爱爱爱</div>
                    </div>
                </div>
                <div class="message-item">
                    <img src="../../../../images/talk/person.png" class="message-item-img img-circle">
                    <div class="message-item-time">2017-08-20 21:00</div>
                    <div class="message-item-content">
                        <div class="message-item-title">
                            <a href="#" class="message-color">测试用户</a>
                            评论了
                            <a href="#" class="message-color">在清华大学当学渣是种怎样的体验体验体验体验体验体验体验？</a>
                        </div>
                        <div class="message-item-text">可能成为大科学家，可能拿个奖学金，可能谈一场恋爱爱爱爱爱爱爱爱爱爱</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="like-content" style="display: none;">
            <div class="like-head">收到的赞</div>
            <div class="headBar"></div>
            <div class="follow-detail">
                <div class="like-item">
                    <img src="../../../../images/talk/person.png" class="message-item-img img-circle">
                    <div class="message-item-content">
                        <div class="message-item-title">
                            <a href="#" class="message-color">测试用户</a>
                            赞了你的文章
                            <a href="#" class="message-color">在清华大学当学渣是种怎样的体验体验体验体验体验体验体验？</a>
                        </div>
                        <div class="like-item-time">2017-08-20 21:00</div>
                    </div>
                </div>
                <div class="like-item">
                    <img src="../../../../images/talk/person.png" class="message-item-img img-circle">
                    <div class="message-item-content">
                        <div class="message-item-title">
                            <a href="#" class="message-color">测试用户</a>
                            赞了你的文章
                            <a href="#" class="message-color">在清华大学当学渣是种怎样的体验体验体验体验体验体验体验？</a>
                        </div>
                        <div class="like-item-time">2017-08-20 21:00</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<c:import url="/WEB-INF/jsp/frontend/footer.jsp"/>
<script src="<spring:url value="/js/bootstrap.min.js"/>"></script>
<script>
    $(document).ready(function () {
        var reply = $(".reply-content");
        var follow = $(".follow-content");
        var like = $(".like-content");

        var currentChoose = reply;

        $("#message-choose-reply").click(function () {
            if (currentChoose !== reply) {
                currentChoose.animate({height: 'toggle'}, 200, function () {
                    reply.animate({height: 'toggle'}, 200);
                    currentChoose = reply;
                });
            }
        });

        $("#message-choose-follow").click(function () {
            if (currentChoose !== follow) {
                currentChoose.animate({height: 'toggle'}, 200, function () {
                    follow.animate({height: 'toggle'}, 200);
                    currentChoose = follow;
                });
            }
        });

        $("#message-choose-like").click(function () {
            if (currentChoose !== like) {
                currentChoose.animate({height: 'toggle'}, 200, function () {
                    like.animate({height: 'toggle'}, 200);
                    currentChoose = like;
                });
            }
        });
    })
</script>
</body>
</html>
